<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>彩票中奖查询工具</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>彩票中奖查询工具</h1>
        
        <div class="input-section">
            <h2>选择彩票类型</h2>
            <div class="lottery-type-selector">
                <label>
                    <input type="radio" name="lotteryType" value="ssq" checked> 双色球
                </label>
                <label>
                    <input type="radio" name="lotteryType" value="dlt"> 大乐透
                </label>
            </div>
            
            <h2>输入您的彩票号码</h2>
            <div class="number-input">
                <div class="main-balls">
                    <label id="mainBallsLabel">红球号码（选择6个）：</label>
                    <div class="ball-container" id="mainBallContainer">
                        <!-- 主球号码将通过JavaScript动态生成 -->
                    </div>
                </div>
                <div class="special-balls">
                    <label id="specialBallsLabel">蓝球号码（选择1个）：</label>
                    <div class="ball-container" id="specialBallContainer">
                        <!-- 特殊球号码将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>
            
            <div class="selected-numbers">
                <p>您选择的号码：<span id="selectedNumbers">请先选择号码</span></p>
            </div>
            
            <div class="query-options">
                <label for="periodCount">查询最近几期：</label>
                <select id="periodCount">
                    <option value="5">5期</option>
                    <option value="10" selected>10期</option>
                    <option value="20">20期</option>
                    <option value="50">50期</option>
                </select>
                <button id="queryButton">查询中奖情况</button>
            </div>
        </div>
        
        <div class="result-section">
            <h2>查询结果</h2>
            <div id="results">
                <p>请点击"查询中奖情况"按钮获取结果</p>
            </div>
        </div>
    </div>
    
    <script src="renderer.js"></script>
</body>
</html>